<template>
    <div class="absolute inset-0">
        <div :class="['nav-bar','bg-dark-400','py-3','w-full', 'rounded-b-2xl','px-2', visible ? '' : 'hide', 'absolute', 'left-0', 'top-0', 'z-40']">
            <div class="mx-3" @click="closeMenu">
                <Close color="#fff" width="1rem" height="1rem" />
            </div>
            <div>
                <div :class="['item', 'text-light-50', 'p-2']" @click="clickItem(index)" v-for="(item, index) in dataSource" :key="index">{{ item.videoName }}</div>
            </div>
        </div>
        <div class="w-full h-full absolute left-0 top-0 z-20 overflow-hidden mask" v-show="visible" @click="closeMenu"></div>
    </div>
</template>

<script setup lang="ts">
import { Close } from '@nutui/icons-vue';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    dataSource: {
        type: Array,
        default: () => []
    }
})

const emits = defineEmits(['update:visible', 'select'])
const current = ref(0)

// 关闭菜单
const closeMenu = () => {
    emits('update:visible', false)
}

// 点击菜单
const clickItem = (index: number) => {
    emits('select', index)
    closeMenu()
}

</script>

<style lang="scss" scoped>
.nav-bar {
    transition: all .3s ease-in-out;
    &.hide {
        top: -100%;
    }
}
.mask {
    background-color: rgba(0,0,0,.5);
}
</style>